/*
* @Description:可视化-节点数据展示图
* @Author: lil
* @Date: 2021/11/29
**/
<template>
  <div class="nodeDataPieChart">
    <div id="nodeDataPieChart" style="width:747px;height:250px"></div>
  </div>
</template>
<script>
  import {
    peerInfo
  } from '@/api/blockchain/blockchainvisualization'
  export default {
    data() {
      return {
        myChart: '',
      };
    },
    mounted() {
      this.drawLine();
      this.getAllPeerInfo("all");
    },
    methods: {
      getAllPeerInfo(date) {
        peerInfo(date).then((res) => {
          var peerData = [];
          for (let i = 0; i < res.data.length; i++) {
            peerData.push({
              value: '',
              name: '',
              nodeDataNum: '',
              nodeQueryNum: ''
            });
            peerData[i].value = 33 + 3 * i;
            peerData[i].name = res.data[i].Name;
            peerData[i].nodeDataNum = res.data[i].InvokeNum;
            peerData[i].nodeQueryNum = res.data[i].QueryNum;
          }
          console.log(peerData)
          this.myChart.setOption({
            series: [{
              data: peerData
            }]
          });

        }).catch((err) => {
          console.log(err);
        });
      },


      drawLine() {
        this.myChart = this.$echarts.init(document.getElementById('nodeDataPieChart'));
        let color1 = new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
          offset: 0,
          color: "#f4b21f"
        }, {
          offset: 1,
          color: "#f28510"
        }], false);
        let color2 = new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
          offset: 0,
          color: "#40b8fe"
        }, {
          offset: 1,
          color: "#0c64fb"
        }], false);
        let color3 = new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
          offset: 0,
          color: "#597af2"
        }, {
          offset: 1,
          color: "#b236dd"
        }], false);
        this.myChart.setOption({
          color: ['#00d2c7', color1, color2, color3],
          series: [{
            type: 'pie',
            radius: ['21%', '76%'],
            roseType: 'area',
            labelLine: {
              normal: {
                length: 20,
                length2: 40,
              }
            },
            label: {
              normal: {
                formatter: function (param) {
                  if (param.name.length <= 6) {
                    return '{a|' + param.name + '}' + "\n" +
                      '{b|' + '节点数据量 ' + '}' + '{c|' +
                      param.data.nodeDataNum + '}' + "\n" + '{b|' + '节点查询量 ' + '}' + '{c|' +
                      param.data.nodeQueryNum + '}';
                  } else if (param.name.length > 6 && param.name.length <= 12) {
                    return '{a|' + `${param.name.slice(0, 6)}\n${param.name.slice(6, 12)}` + '}' + "\n" +
                      '{b|' + '节点数据量 ' + '}' + '{c|' +
                      param.data.nodeDataNum + '}' + "\n" + '{b|' + '节点查询量 ' + '}' + '{c|' +
                      param.data.nodeQueryNum + '}';
                  }
                },
                rich: {
                  a: {
                    fontSize: 19,
                    lineHeight: 17,
                    color: '#ceebff',
                    fontWeight: 'bold',
                    align: 'left'
                  },
                  b: {
                    fontSize: 14,
                    lineHeight: 16,
                    color: '#7da3ff',
                    align: 'left'
                  },
                  c: {
                    fontSize: 14,
                    lineHeight: 16,
                    color: '#54f2ea',
                    fontWeight: 'bold',
                    align: 'left'
                  },
                }
              }
            },
            data: []
          }]
        });

        if (window.screen.width == 1680) {
          this.myChart.resize({
            width: '625px'
          });
        } else if (window.screen.width == 1600) {
          this.myChart.resize({
            width: '555px',
          });
          this.myChart.setOption({
            series: [{
              radius: ['20%', '75%'],
            }]
          })
        } else if (window.screen.width <= 1440) {
          this.myChart.resize({
            width: '455px'
          });
          this.myChart.setOption({
            series: [{
              radius: ['18%', '65%'],
              label: {
                normal: {
                  rich: {
                    a: {
                      fontSize: 19
                    },
                    b: {
                      fontSize: 14
                    },
                    c: {
                      fontSize: 13
                    }
                  }
                }
              }
            }]
          })
        } else if (window.screen.width == 1366) {
          this.myChart.resize({
            width: '455px'
          });
        }
      }
    },
  }

</script>
<style lang="scss" scoped>
  .nodeDataPieChart {
    background: url(~@/assets/image/ksh-pie2-bg.png) no-repeat;
    background-size: 53px 53px;
    background-position-x: 379px;
    background-position-y: 98px;
    margin-top: 10px;
    padding-left: 32px;
  }

  @media screen and (max-width:1680px) {
    .nodeDataPieChart {
      background-position-x: 318px;
    }
  }

  @media screen and (max-width:1600px) {
    .nodeDataPieChart {
      background-position-x: 285px;
      background-position-y: 100px;
      background-size: 50px 50px;
    }
  }

  @media screen and (max-width:1440px) {
    .nodeDataPieChart {
      background-position-x: 235px;
    }
  }

</style>
